<template>
  <el-card class="box-card">
1
    <el-form ref="form" :model="form" label-width="80px" :inline="true" >
      <div class="locationstyle">
        <div>说明：目前支持学科和关键字条件筛选</div>
        <div>
            <el-form-item>
              <el-button type="success" icon="el-icon-edit"  @click="newincreaseuser" >新增用户</el-button>
            </el-form-item>
        </div>
      </div>

        <el-form-item label="学科">
          <el-select v-model="form.subject" placeholder="请选择" @change="subjectSelect">
            <el-option
              v-for="(item, i) in  SubjectsSimpleList"
              :key="i"
              :label="item.label"
              :value="item.value"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select v-model="form.secondLevel" placeholder="请选择" @change="secondchange">
             <el-option
              v-for="(item, i) in  SecondLevelList"
              :key="i"
              :label="item.label"
              :value="item.value"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="form.threeLable" placeholder="请选择" @change="lablechange">
              <el-option
              v-for="(item, i) in  TagsSimpleList"
              :key="i"
              :label="item.label"
              :value="item.value"
              />
          </el-select>
        </el-form-item>
          <el-form-item label="关键字">
          <el-input v-model="form.keywords" placeholder="根据提干搜索"></el-input>
        </el-form-item>
          <el-form-item label="试题类型">
          <el-select v-model="form.texttype" placeholder="请选择">
            <el-option label="单选" value="单选"></el-option>
            <el-option label="多选" value="多选"></el-option>
            <el-option label="简答" value="简答"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option label="简单" value="简单"></el-option>
            <el-option label="一般" value="一般"></el-option>
            <el-option label="困难" value="困难"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option label="o2o" value="1"></el-option>
            <el-option label="外包服务" value="0"></el-option>
            <el-option label="企业服务" value="0"></el-option>
            <el-option label="互联网金融" value="0"></el-option>
            <el-option label="企业咨询" value="0"></el-option>
            <el-option label="互联网" value="0"></el-option>
            <el-option label="电子商务" value="0"></el-option>
            <el-option label="其他" value="0"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="录入人">
          <el-select v-model="form.entrypeople" placeholder="请选择">
              <el-option
              v-for="(item, i) in  usersSimpleList"
              :key="i"
              :label="item.username"
              :value="item.username"
              />
          </el-select>
        </el-form-item>
            <el-form-item label="题目备注">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item label="企业简称">
              <el-input v-model="form.intro"></el-input>
            </el-form-item>
          <el-form-item label="城市">
          <el-select v-model="form.province" placeholder="请选择">
            <el-option label="天津市" value="天津市"></el-option>
            <el-option label="重庆市" value="重庆市"></el-option>
          </el-select>
          <el-select v-model="form.city" placeholder="请选择">
            <el-option label="和平区" value="和平区"></el-option>
            <el-option label="南岸区" value="南岸区"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>

    </el-form>
    <!-- <- 共多少记录 todo -->
      <el-alert
        type="info"
        :closable="false"
        class="infostyle"
        >
        数据一共{{ basicsTestList.counts}}条
      </el-alert>

      <!-- 列表 -->
      <my-table
      class="mytablestyle"
      :table-props="{
        data: basicsTestList.items,
        border: false,
      }"
      :columns="[
        { label: '试题编号', prop: 'number', width: 80, align: 'center' },
        { label: '学科', prop: 'subject', width: 180, align: 'center' },
        { label: '目录', prop: 'catalog', width: 180, align: 'center' },
        { label: '题型', prop: 'questionType', width: 180, align: 'center' },
        { label: '提干', prop: 'question' , width: 180, align: 'center',  },//换v-html格式todo
        { label: '录入时间', prop: 'addDate', width: 180, align: 'center' },
        { label: '难度', prop: 'difficulty', width: 180, align: 'center' },
        { label: '录入人', prop: 'creator', width: 180, align: 'center',sortable: true, },
        { label: '操作', slotName: 'operate', align: 'center', width:200, fixed: 'right' },  // 带插槽slotName
      ]"
      :pagination-props="{
        layout: ' prev, pager, next, sizes, jumper, total',
        total: basicsTestList.counts,
        background: true
      }"
      :pagination-events="events"
    >
      <!-- <template #question>
             <div v-html="basicsTestList.items[0].question" ></div> todo
      </template> -->
      <template   v-slot:operate="scope">
        <el-row>
          <el-button type="primary" icon="el-icon-view"  circle @click="lookover(scope.row)"></el-button>
          <el-button type="success" icon="el-icon-edit"  circle @click="changeBT(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete"  circle @click="deleteBT(scope.row)"></el-button>
          <el-button type="warning" icon="el-icon-check"   circle @click="selection(scope.row)"></el-button>
        </el-row>
      </template>
    </my-table>

    <!-- 题目预览 -->
     <el-dialog title="题目预览" :visible.sync="preview">
      <div class="previewtitle">
         <!-- <div class="previewtitlebar">【题型】{{LookOverList.questionType ? '单选' : '多选'}}</div> -->
         <div class="previewtitlebar">【题型】{{LookOverList.questionType}}</div>
         <div class="previewtitlebar">【编号】{{LookOverList.id}}</div>
         <div class="previewtitlebar">【难度】{{LookOverList.difficulty}}</div>
         <div class="previewtitlebar">【标签】{{LookOverList.tags}}</div>
         <div class="previewtitlebar">【学科】{{LookOverList.subjectName}}</div>
         <div class="previewtitlebar">【目录】{{LookOverList.directoryName}}</div>
         <div class="previewtitlebar">【方向】{{LookOverList.direction}}</div>
      </div>
      <!-- 提干 -->
      <div class="laststyltetitle">
        【提干】:
        <div v-html="LookOverList.question" style="color:blue"></div>
        <div>{{LookOverList.questionType}} 选项：（以下选中的选项为正确答案）</div>
            <!-- 单选 todo -->
          <el-radio-group v-if="LookOverList.questionType==1" v-model="checkList">
            <el-radio  :label="item.title" v-for="(item,i) in LookOverList.options" :key="i" class="checkboxstyle"></el-radio>
          </el-radio-group>
            <!-- 多选 todo-->
           <el-checkbox-group  v-else v-model="checkList">
            <el-checkbox  :label="item.title" v-for="(item,i) in LookOverList.options" :key="i" class="checkboxstyle"></el-checkbox>
          </el-checkbox-group>


      </div>
      <div class="laststylte">
        【参考答案】：
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="videovision">视频答案预览</el-button>
        </span>
      </div>
      <div class="laststylte" v-html="'【答案解析】:'+ LookOverList.answer" >
      </div>
      <div class="laststylte">
       【题目备注】：{{LookOverList.remarks ? LookOverList.remarks :'无'}}
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewClose">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 删除基础题库 -->
     <el-dialog title="题目预览" :visible.sync="deleteBasicTest">
        <div class="el-icon-warning" icon="success">此操作将永久删除该题目, 是否继续?</div>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="deleteBasicTestClose">取消</el-button>
        <el-button type="primary" @click="deleteBasicTestOk">确定</el-button>
      </div>
    </el-dialog>
    <!-- 是否加入精选题库 -->
     <el-dialog title="题目预览" :visible.sync="selectionTest">
        <div class="el-icon-warning" icon="success">此操作将该题目加入精选, 是否继续?</div>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="selectionTestClose">取消</el-button>
        <el-button type="primary" @click="selectionTestOk">确定</el-button>
      </div>
    </el-dialog>


  </el-card>

</template>

<script>
import { mapState, mapActions} from "vuex";
import * as testmanagementApi from '@/api/testmanagement';

// 获取id
let subjectId = null
//删除基础题库获取id
let deleteBasicId = null
// 加入精选题库取id
let selectionId = null

export default {
  data() {
    return {
      page:1,
      pagesize:10,
      // 题目预览弹窗开关
      preview:false,
      // 删除基础题库弹窗
      deleteBasicTest:false,
      // 加入精选题库弹窗
      selectionTest:false,
      // 搜索页的配置
      form: {
        subject: null,
        secondLevel: null,
        threeLable: null,
        keywords: null,
        texttype: null,
        difficulty: null,
        direction: null,
        entrypeople: null,
        remark: null,
        intro: null,
        province:null,
        city: null,
      },
      // 点击翻页监听事件
      events: {
        "current-change": this.handleCurrentChange,
        "size-change": this.pagesizeChange,
      },
      // 显示选项盒子
      checkList:[]

    };
  },
  computed:{
    ...mapState("testmanagement",[
        // 获取基础题库列表
      "basicsTestList",
      // 学科下拉菜单
      "SubjectsSimpleList",
      // 用户简单列表（目前是用在录入人列表）
      "usersSimpleList",
      // 学科二级目录（新添加)
      "SecondLevelList",
      // 获取搜索页标签选项数据)
      "TagsSimpleList",
      // 基础题库详情 题目预览
      "LookOverList",
    ]),
  },
  methods: {
    ...mapActions("testmanagement",[
        // 更新基础题库列表
      "updatebasicsTestList",
        // 学科下拉菜单
      "updateSubjectsSimpleList",
        // 用户简单列表（目前是用在录入人列表）
      "updateUsersSimpleList",
        // 学科二级目录（新添加
      "updateSecondLevelList",
        // 获取搜索页标签选项数据
      "updateTagsSimpleList",
        // 基础题库详情 题目预览
      "updateLookOverList",

    ]),
      // 更新页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 更新页数列表
      this.updatebasicsTestList({
        page: (this.page = val),
        pagesize: this.pagesize,
      });
    },
    // 更新每页展示数量
    pagesizeChange(val) {
      console.log(`当前页: ${val}`);
      // 更新页数列表
      this.updatebasicsTestList({
        page: this.page,
        pagesize: (this.pagesize = val),
      });
    },
    // 新增用户
    newincreaseuser(){
      // 跳路由
      this.$router.push('new')

    },
    // 搜索清除按钮
    resetForm(){
      this.form = {}
    },
    // 点击搜素按钮
    onSubmit(){
      // 通过id等数据获取返回值
      this.updatebasicsTestList({
        subjectID: subjectId,
        page:this.page,
        pagesize: this.pagesize,
        ...this.form

      })
    },
    // 学科选择监听事件
    subjectSelect(data){
      console.log(data);
      // 学科二级目录（新添加
      this.updateSecondLevelList({
        subjectID: data
      })
      // 获取搜索页标签选项数据
      this.updateTagsSimpleList({
        subjectID: data
      })
      // 给二级菜单清空
      this.form.secondLevel = [],
      // 给搜索页标签选项清空
      this.form.threeLable = []
      subjectId = data

    },
    // 二级目录获取
    secondchange(){
        // 学科二级目录（新添加
      this.updateSecondLevelList({
        subjectID: subjectId
      })

    },
    // 搜索页标签数据获取
    lablechange(){
        // 获取搜索页标签选项数据
      this.updateTagsSimpleList({
        subjectID: subjectId
      })
    },
    // 点击查看，题目预览
    async lookover(row){
      console.log(row.id);
     await this.updateLookOverList({
        id: row.id
      })
      // 返显
      // this.checkList = this.LookOverList.options.isRight  //todo

      // 点击打开预览
      this.preview = true

    },
    // 点击题目预览里面的关闭按钮
    previewClose(){
      this.preview = false
    },
    // 视频栏
    videovision(){
      // todo
    },
      // 删除基础题库
    deleteBT(row){
      this.deleteBasicTest = true
      deleteBasicId = row.id
    },
    // 删除基础题库取消键
    deleteBasicTestClose(){
      this.deleteBasicTest = false
    },
      // 删除基础题库确定键
    deleteBasicTestOk(){
      testmanagementApi.deletebasicTest({
        id: deleteBasicId
      }),
      this.deleteBasicTest = false
      // 删除后更新题库
      this.updatebasicsTestList({
        page: this.page,
        pagesize: this.pagesize,
      })
      .then(msg => this.$message.success('删除成功'))
      .catch(msg => this.$message.error('删除失败'))
    },
    // 是否加入精选按钮弹窗
    selection(row){
     this.selectionTest = true
      selectionId = row.id
    },
    // 取消加入精选题库
    selectionTestClose(){
      this.selectionTest = false
    },
    // 确定介入精选题库
    selectionTestOk(){
      testmanagementApi.choicenessTest({
        id: selectionId,
        choiceState: 1
      })
      this.selectionTest = false
      this.updatebasicsTestList({
          page:this.page,
          pagesize: this.pagesize,
      })
      .then(this.$message.success('加入成功'))

    },
    // 跳转编辑页
    changeBT(row){
      console.log(row.id);
      // 跳路由
      // this.$router.push('new/:id') //todo/
      // 这里是获取id信息并跳转编辑页 todo
        this.$router.push({
        name: 'questions-new',  //todo
        // 使用params时必须用name
        params: {
          id:row.id,
        }
      })


    }

  },
  created(){
    this.updatebasicsTestList({
      page:this.page,
      pagesize: this.pagesize,
    });
    // 更新学科下拉菜单
    this.updateSubjectsSimpleList();
    // 用户简单列表（目前是用在录入人列表）
    this.updateUsersSimpleList();

  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    margin: 8px;
  }
  .locationstyle{
    display: flex;
    justify-content: space-between;
  }
  .previewtitle {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid gray;

    .previewtitlebar {
      margin: 10px;
    }
  }
  .laststyltetitle {
     display: flex;
     flex-direction: column;

  }
  .laststylte {
    border-bottom: 1px solid gray;
  }
  .checkboxstyle {
    flex: 1;
    display: block;
    padding: 8px;



  }
</style>
